<!DOCTYPE html>
<html>
<head>
	<title>Simple Charts</title>
	<style type="text/css">
		.axis path,
		.axis line{
		    fill: none;
		    stroke: black;
		    shape-rendering: crispEdges;
		}

		.axis text {
		    font-family: sans-serif;
		    font-size: 11px;
		}
	</style>
</head>
<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
	<script type="text/javascript">
		var width=300;//画布的宽度
		var height=300;//画布的高度

		//init svg
		var svg=d3.select('body').append('svg');//Create  a SVG Element
		svg.attr('width',width);
		svg.attr('height',height);	

		//线性比例尺
		var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9];
		var max=d3.max(dataset);
		var linear=d3.scale.linear().
		                    domain([0,max]). //定义域[0.9, 3.3]
		                    range([0,250]);//值域[0, 300]

		var axis = d3.svg.axis() //坐标轴的组件
		     .scale(linear)      //指定比例尺
		     .orient("bottom")   //指定刻度的方向
		     .ticks(7);          //指定刻度的数量		       
		              
		svg.append('g')
		   .attr('class','axis')
		   .attr('transform',"translate(20,130)")
		   .call(axis);//call的参数是一个函数,调用后,将当前的选择集作为参数传递给此函数

		//rect
		var colorset=['red','blue','green','yellow','orange'];//colors
		var rectHeight=25;//每个矩形所占的像素高度(包括空白)
		var rect=svg.selectAll('rect').//选择svg内所有的矩形
		             data(dataset).//绑定数组
		             enter().//指定选择集的enter部分
		             append('rect');//当有数据而没有足够图形元素的时候,使用此方法可以添加足够的元素。
		rect.attr('x',20).
		     attr('y',function(value,index){
					return index*rectHeight;
				}).
		     attr('width',value=>linear(value)).
		     attr('height',rectHeight-2).//让每个rect实际高度小于rectHeight 2px,作为空隙
		     attr('fill',function(value,index){
		     	return colorset[index];
		     });

	</script>
</body>
</html>